<template>
	<view class="corporateImpression">
		<view class="drag-container">
			<view class="section">
				<template v-if="controlsPositionArray.length !== 0">
					<view v-for="(item, index) in controlsArray" :key="index" class="item" :style="{'transition': (curretnControlsIndex === index ? 'initial' : `${animationDuration}s`), 
						'z-index': (curretnControlsIndex === index ? 1 : 0), 
						'height': controlsSize.height + 'px', 
						'top': controlsPositionArray[index].top + 'px',  
						'left': controlsPositionArray[index].left + 'px'}">
						<!-- <view class="list-item" @touchstart="handleTouchstart($event, index)" @touchmove="handleTouchmove"
							@touchend="handleTouchend">
							<view style="title">
								{{item.title}}
							</view>
						</view> -->
						<view class="item-section" @touchstart="handleTouchstart($event, index)" @touchmove="handleTouchmove"
							@touchend="handleTouchend">
							<view class="left">
								<image :src="`https://ywtmp.hnwytkj.com/static/images/${iconMap[item]}.png`" mode=""></image>
								<view>{{modulesMap[item]}}</view>
							</view>
							<image 
								src="https://ywtmp.hnwytkj.com/static/images/sort.png" 
								class="sort"
							></image>
						</view>
					</view>			
				</template>
			</view>
		</view>
		<!-- <view class="btn-box">
			<view class="btn" @tap="submit">保存</view>
		</view> -->
	</view>
</template>
 
<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				info: {},
				modulesMap: {
					'companyImpression': '企业印象',
					'companyVideo': '企业视频',
					'companyComments': '企业介绍',
					'companyIntroImg': '图文展示',
					'address': '企业地址',
					'companyIntro': '我的简介',
					'myImpression': '我的印象',
					'companyRadar': '企业雷达'
				},
				iconMap: {
					'companyImpression': 'icon1',
					'companyVideo': 'icon2',
					'companyComments': 'icon3',
					'companyIntroImg': 'icon4',
					'address': 'icon5',
					'companyIntro': 'icon6',
					'myImpression': 'icon7',
					// 'companyRadar': '企业雷达'
				},
				list: [
					'companyImpression',
					'companyVideo',
					'companyComments',
					'companyIntroImg',
					'address',
					'companyIntro',
					'myImpression'
				],
				controlsSize: {
					height: 65
				},
				animationDuration: 0.3,
				// 控件列表
				controlsArray: [],
				// 每行最大存放的个数
				maxWidthCount: 1,
				// 控件的间距
				margin: {
					margin_x: 0,
					// margin_y: 10,
					margin_y:0,
				},
				// 记录所有控件的初始位置
				recordInitControlsPoisitonList: [],
				// 控件的数据
				controlsPositionArray: [],
				// 记录当前手指的位置
				recordPosition: {
					x: 0,
					y: 0,
				},
				// 记录当前操作的控件数据
				recordControlsPositionItem: {},
				// 当前操作的控件的下标
				curretnControlsIndex: -1,
			};
		},
		onLoad() {
			// this.getData() 
		},
		mounted() {
			// 获取系统信息
			this.systemInfo = uni.getSystemInfoSync();
			// 获取控件列表
			this.controlsArray = this.list;
 
			// 初始化控件的位置
			this.controlsPositionArray = this.initControlsPosition();
		},
		methods: {
			/** 初始化各个控件的位置 */
			initControlsPosition() {
				// 用于返回出去的新数组
				let tempArray = [];
 
				// 设置控件位置
				for (let i = 0, j = 0; i < this.list.length; i++, j++) {
					tempArray[i] = {
						left: this.margin.margin_x,
						top: j * (this.controlsSize.height + this.margin.margin_y) + this.margin.margin_y,
					}
				}
 
				// 记录数据 - 进行深拷贝
				this.recordInitControlsPoisitonList = [...tempArray];
				// 返回数据
				return tempArray;
			},
 
			/** 处理手指触摸后移动 */
			handleTouchmove(event) {
				const {
					pageX,
					pageY
				} = event.touches[0];
 
				// 获取移动的差
				this.controlsPositionArray[this.curretnControlsIndex] = {
					left: this.controlsPositionArray[this.curretnControlsIndex].left + (pageX - this.recordPosition.x),
					top: this.controlsPositionArray[this.curretnControlsIndex].top + (pageY - this.recordPosition.y),
				}
				// 记录位置
				this.recordPosition = {
					x: pageX,
					y: pageY
				};
				// 判断当前移动的位置是否需要进行排序
				// 向下移动
				if (this.curretnControlsIndex !== this.controlsPositionArray.length - 1 && this.controlsPositionArray[this
						.curretnControlsIndex].top > this.controlsPositionArray[this.curretnControlsIndex + 1].top) {
					// 交换位置
					this._handleChangeControlsPosition(0, this.curretnControlsIndex + 1);
				}
				// 向上移动
				else if (this.curretnControlsIndex !== 0 && this.controlsPositionArray[this.curretnControlsIndex].top <
					this.controlsPositionArray[this.curretnControlsIndex - 1].top) {
					// 交换位置
					this._handleChangeControlsPosition(0, this.curretnControlsIndex - 1);
				}
			},
 
			/** 处理手指触摸开始事件 */
			handleTouchstart(event, index) {
				const {
					pageX,
					pageY
				} = event.touches[0];
 
				// 记录一些数据
				this.curretnControlsIndex = index;
				this.recordPosition = {
					x: pageX,
					y: pageY
				};
				this.recordControlsPositionItem = this.controlsPositionArray[index];
			},
 
			/** 处理手指松开事件 */
			handleTouchend(event) {
				// 将操控的控件归位
				this.controlsPositionArray[this.curretnControlsIndex] = this.recordInitControlsPoisitonList[this
					.curretnControlsIndex];
				this.curretnControlsIndex = -1;
				console.log(this.list)
				this.submit()
			},
 
			/**
			 * 处理交换控件位置的方法 - 
			 * @param {number} index	需要与第几个下标交换位置
			 * */
			_handleChangeControlsPosition(type, index) {
				// 记录当前操控的控件数据
				let tempControls = this.controlsArray[this.curretnControlsIndex];
 
				// 设置原来位置的数据
				this.controlsArray[this.curretnControlsIndex] = this.controlsArray[index];
				// 将临时存放的数据设置好
				this.controlsArray[index] = tempControls;
 
				// 调整控件位置数据
				this.controlsPositionArray[index] = this.controlsPositionArray[this.curretnControlsIndex];
				this.controlsPositionArray[this.curretnControlsIndex] = this.recordControlsPositionItem;
 
				// 改变当前选中的位置
				this.curretnControlsIndex = index;
 
				// 记录新位置的数据
				this.recordControlsPositionItem = this.recordInitControlsPoisitonList[this.curretnControlsIndex];				
			},
			getData() {
				http({
					url: 'card/user-profile/get'
				}).then(res => {				
					if(res.code === 0) {				
						const modules = res.data.companyProfileDO.sort ? res.data.companyProfileDO.sort.split(','): []
						this.list = modules
					}
				})		
			},
			submit() {
				http({
					url: 'card/user-profile/sort/update',
					method: 'put',
					data: {
						sort: this.list.join(',')
					}
				}).then(res => {				
					if(res.code === 0) {				
						// uni.showToast({
						// 	title: '保存成功',
						// 	icon: "success"
						// });
						this.modules = []
						this.getData()
					}
				})
			}
		}
	}
</script>
 
<style scoped lang="scss">
	.corporateImpression {
		background: #F0F0F4;
		min-height: 100vh;
		padding-top: 20rpx;
		box-sizing: border-box;
		font-family: PingFang SC;
		.drag-container {
			position: relative;
			width: 100%;
			height: calc(100% - 20rpx);
			.item {
				width: 100%;
				height: 100%;
				position: absolute;				
			}
		}
	}
	.section {
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px #EEEEEE;
		border-radius: 40rpx 40rpx 0 0;
		.item-section {
			height: 130rpx;
			box-shadow: 0px 0px 20rpx 0px #EEEEEE;
			border-radius: 40rpx 40rpx 0 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: relative;
			background: rgba(255, 255, 255, 0.8);
			transition: transform 0.3s ease;
			will-change: transform;
			&.active {
				transition: none;
				transform: scale(1.05);
				position: absolute;
				width: 100%;
			}
			.left {
				display: flex;
				// align-items: center;
				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 10rpx;
				}
			}
			.sort {
				width: 70rpx;
				height: 70rpx;
			}
		}
	}
	.btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 20rpx calc(20rpx + var(--safe-area-inset-bottom));
		box-sizing: border-box;
		background-color: #FFFFFF;
		.btn {
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background: #4B73FF;
			border-radius: 20rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			// margin-top: 42rpx;
		}
	}
</style>